<template>
  <div class="hello">
    <div>

      <div class="tree-container">
        <ever-bright-tree
            v-model="nodes"
            ref="slVueTree"
            :allow-multiselect="true"
            @select="nodeSelected"
            @drop="nodeDropped"
            @toggle="nodeToggled"
            @nodecontextmenu="showContextMenu"
            @search="handleSearch"
        >
          <span v-if="!node.isLeaf" slot="toggle" slot-scope="{ node }">
            <i :class="[
                {'el-icon-caret-right': !node.isExpanded},
                {'el-icon-caret-bottom': node.isExpanded},
              ]"></i>
          </span>

          <span class="item-icon" slot="title" slot-scope="{ node }">
            <i v-if="node.isLeaf" class="el-icon-document"></i>
            <i v-if="!node.isLeaf" :class="[
                {'el-icon-folder-opened': node.isExpanded},
                {'el-icon-folder': !node.isExpanded},
              ]"></i>

            {{ node.title }}
          </span>


          <template slot="sidebar" slot-scope="{ node }">
            <span class="visible-icon" @click="event => toggleVisibility(event, node)">
              <i v-if="!node.data || node.data.visible !== false" class="el-icon-more"></i>
              <i v-if="node.data && node.data.visible === false" class="el-icon-more-outline"></i>
            </span>
          </template>


          <!-- <template slot="draginfo">
            11{{selectedNodesTitle}}
          </template> -->
          <span v-if="selectedNode.title" class="item-icon" slot="draginfo" >
            <i v-if="selectedNode.isLeaf" class="el-icon-document"></i>
            <i v-if="!selectedNode.isLeaf" :class="[
                {'el-icon-folder-opened': selectedNode.isExpanded},
                {'el-icon-folder': !selectedNode.isExpanded},
              ]"></i>
            {{ selectedNode.title }}
          </span>

        </ever-bright-tree>
      </div>
    </div>
    <div v-if="searchResult" class="tree-search-result" style="text-align: left">
      搜索结果:
      <p v-for="(item, index) in searchResult" :key="index" @click="goQuickly(item)">
        {{item.currentPath.join("/")}}

      </p>
    </div>

  </div>
</template>

<script>
/* eslint-disable */
import ls from "./pca-code.json"
console.log(ls)
const formatData = function(list) {
  list.forEach(item => {
    if (item.children) {
      formatData(item.children)
    } else {
      item.isLeaf = true
    }
  });

}
formatData(ls)


const nodes = [
    {title: 'Item1', isLeaf: true},
    {title: 'Item979', isLeaf: true},
    {title: 'Item2', isLeaf: true, data: { visible: false }},
    {title: 'Folder1'},
    {
      title: 'Folder2', isExpanded: true, children: [
        {title: 'Item3', isLeaf: true},
        {title: 'Item4', isLeaf: true},
        {
          title: 'Folder3', children: [
            {title: 'Item5', isLeaf: true}
          ]
        }
      ]
    },
    {title: 'Folder5', isExpanded: false},
    {title: 'Item6', isLeaf: true},
    {title: 'Item7', isLeaf: true, data: { visible: false }},
    {
      title: 'Folder6', children: [
        {
          title: 'Folder7', children: [
            {title: 'Item8', isLeaf: true},
            {"title":"Item9","isLeaf":true},{"title":"Item10","isLeaf":true},{"title":"Item11","isLeaf":true},{"title":"Item12","isLeaf":true},{"title":"Item13","isLeaf":true},{"title":"Item14","isLeaf":true},{"title":"Item15","isLeaf":true},{"title":"Item16","isLeaf":true},{"title":"Item17","isLeaf":true},{"title":"Item18","isLeaf":true},{"title":"Item19","isLeaf":true},{"title":"Item20","isLeaf":true},{"title":"Item21","isLeaf":true},{"title":"Item22","isLeaf":true},{"title":"Item23","isLeaf":true},{"title":"Item24","isLeaf":true},{"title":"Item25","isLeaf":true},{"title":"Item26","isLeaf":true},{"title":"Item27","isLeaf":true},{"title":"Item28","isLeaf":true},{"title":"Item29","isLeaf":true},{"title":"Item30","isLeaf":true},{"title":"Item31","isLeaf":true},{"title":"Item32","isLeaf":true},{"title":"Item33","isLeaf":true},{"title":"Item34","isLeaf":true},{"title":"Item35","isLeaf":true},{"title":"Item36","isLeaf":true},{"title":"Item37","isLeaf":true},{"title":"Item38","isLeaf":true},{"title":"Item39","isLeaf":true},{"title":"Item40","isLeaf":true},{"title":"Item41","isLeaf":true},{"title":"Item42","isLeaf":true},{"title":"Item43","isLeaf":true},{"title":"Item44","isLeaf":true},{"title":"Item45","isLeaf":true},{"title":"Item46","isLeaf":true},{"title":"Item47","isLeaf":true},{"title":"Item48","isLeaf":true},{"title":"Item49","isLeaf":true},{"title":"Item50","isLeaf":true},{"title":"Item51","isLeaf":true},{"title":"Item52","isLeaf":true},{"title":"Item53","isLeaf":true},{"title":"Item54","isLeaf":true},{"title":"Item55","isLeaf":true},{"title":"Item56","isLeaf":true},{"title":"Item57","isLeaf":true},{"title":"Item58","isLeaf":true},{"title":"Item59","isLeaf":true},{"title":"Item60","isLeaf":true},{"title":"Item61","isLeaf":true},{"title":"Item62","isLeaf":true},{"title":"Item63","isLeaf":true},{"title":"Item64","isLeaf":true},{"title":"Item65","isLeaf":true},{"title":"Item66","isLeaf":true},{"title":"Item67","isLeaf":true},{"title":"Item68","isLeaf":true},{"title":"Item69","isLeaf":true},{"title":"Item70","isLeaf":true},{"title":"Item71","isLeaf":true},{"title":"Item72","isLeaf":true},{"title":"Item73","isLeaf":true},{"title":"Item74","isLeaf":true},{"title":"Item75","isLeaf":true},{"title":"Item76","isLeaf":true},{"title":"Item77","isLeaf":true},{"title":"Item78","isLeaf":true},{"title":"Item79","isLeaf":true},{"title":"Item80","isLeaf":true},{"title":"Item81","isLeaf":true},{"title":"Item82","isLeaf":true},{"title":"Item83","isLeaf":true},{"title":"Item84","isLeaf":true},{"title":"Item85","isLeaf":true},{"title":"Item86","isLeaf":true},{"title":"Item87","isLeaf":true},{"title":"Item88","isLeaf":true},{"title":"Item89","isLeaf":true},{"title":"Item90","isLeaf":true},{"title":"Item91","isLeaf":true},{"title":"Item92","isLeaf":true},{"title":"Item93","isLeaf":true},{"title":"Item94","isLeaf":true},{"title":"Item95","isLeaf":true},{"title":"Item96","isLeaf":true},{"title":"Item97","isLeaf":true},{"title":"Item98","isLeaf":true},{"title":"Item99","isLeaf":true},{"title":"Item100","isLeaf":true},{"title":"Item101","isLeaf":true},{"title":"Item102","isLeaf":true},{"title":"Item103","isLeaf":true},{"title":"Item104","isLeaf":true},{"title":"Item105","isLeaf":true},{"title":"Item106","isLeaf":true},{"title":"Item107","isLeaf":true},{"title":"Item108","isLeaf":true},{"title":"Item109","isLeaf":true},{"title":"Item110","isLeaf":true},{"title":"Item111","isLeaf":true},{"title":"Item112","isLeaf":true},{"title":"Item113","isLeaf":true},{"title":"Item114","isLeaf":true},{"title":"Item115","isLeaf":true},{"title":"Item116","isLeaf":true},{"title":"Item117","isLeaf":true},{"title":"Item118","isLeaf":true},{"title":"Item119","isLeaf":true},{"title":"Item120","isLeaf":true},{"title":"Item121","isLeaf":true},{"title":"Item122","isLeaf":true},{"title":"Item123","isLeaf":true},{"title":"Item124","isLeaf":true},{"title":"Item125","isLeaf":true},{"title":"Item126","isLeaf":true},{"title":"Item127","isLeaf":true},{"title":"Item128","isLeaf":true},{"title":"Item129","isLeaf":true},{"title":"Item130","isLeaf":true},{"title":"Item131","isLeaf":true},{"title":"Item132","isLeaf":true},{"title":"Item133","isLeaf":true},{"title":"Item134","isLeaf":true},{"title":"Item135","isLeaf":true},{"title":"Item136","isLeaf":true},{"title":"Item137","isLeaf":true},{"title":"Item138","isLeaf":true},{"title":"Item139","isLeaf":true},{"title":"Item140","isLeaf":true},{"title":"Item141","isLeaf":true},{"title":"Item142","isLeaf":true},{"title":"Item143","isLeaf":true},{"title":"Item144","isLeaf":true},{"title":"Item145","isLeaf":true},{"title":"Item146","isLeaf":true},{"title":"Item147","isLeaf":true},{"title":"Item148","isLeaf":true},{"title":"Item149","isLeaf":true},{"title":"Item150","isLeaf":true}
          ]
        }
      ]
    }
  ];

import EverBrightTree from "../components/everBrightTree/everBrightTree.vue"
export default {
  name: 'HelloWorld',
  components: { EverBrightTree },

  data: function () {
     return {
       nodes: nodes,
       contextMenuIsVisible: false,
       lastEvent: 'No last event',
       selectedNode: {
        isLeaf: false,
        title: ''
       },
       searchResult: ""
     }
    },

    mounted() {
      // expose instance to the global namespace
      window.slVueTree = this.$refs.slVueTree;
    },

    methods: {
      handleSearch(searchResult) {
        this.searchResult = searchResult
        
        // searchResult.map(item => {
        //   return item.currentPath.join("/")
        // })
        console.log(searchResult)
      },
      toggleVisibility: function (event, node) {
        const slVueTree = this.$refs.slVueTree;
        event.stopPropagation();
        const visible = !node.data || node.data.visible !== false;
        slVueTree.updateNode(node.path, {data: { visible: !visible}});
        this.lastEvent = `Node ${node.title} is ${ visible ? 'visible' : 'invisible'} now`;
      },

      nodeSelected(nodes, event) {
        debugger
        this.selectedNode = nodes[0];

        console.log(this.selectedNode)
      },

      nodeToggled(node, event) { },

      nodeDropped(nodes, position, event) {
        this.lastEvent = `Nodes: ${nodes.map(node => node.title).join(', ')} are dropped ${position.placement} ${position.node.title}`;
      },

      showContextMenu(node, event) {
        event.preventDefault();
        this.contextMenuIsVisible = true;
        const $contextMenu = this.$refs.contextmenu;
        $contextMenu.style.left = event.clientX + 'px';
        $contextMenu.style.top = event.clientY + 'px';
      },
      goQuickly(item) {
        
        const scrollY = document.getElementById(`ever_bright_tree-node-${item.title}`).offsetTop
        console.log(`ever_bright_tree-node-${item.title}`, scrollY)
        document.querySelector(".ever_bright_tree-root").scrollTo(0, `${scrollY}px`)
        console.log(item)
      }
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello {
  display: flex;
}


.tree-search-result {
  margin-left: 30px;
  text-align: left;
}

  .row {
    display: flex;
    margin-bottom: 10px;
  }

  .contextmenu {
    position: absolute;
    background-color: white;
    color: black;
    border-radius: 2px;
    cursor: pointer;
    z-index: 99;
  }

  .contextmenu > div {
    padding: 10px;
  }

  .contextmenu > div:hover {
    background-color: rgba(100, 100, 255, 0.5);
  }


  .tree-container {
    flex-grow: 1;
    width: 30vw;
    max-width: 350px;
    min-width: 280px;
  }

  .ever_bright_tree-root {
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    height: 800px;
    scrollbar-width: none;
  }


</style>
